<%- include('./public/header.ejs') %>
<style>
  .userinfo {
    height: calc(100vh - 60px);
    background-color: #f1f1f1;
    box-sizing: border-box;
    padding: 60px;
  }

  .userinfo-header {
    width: 600px;
    height: 60px;
    margin: 0 auto;
    box-sizing: border-box;
    border-bottom: 1px solid #f1f1f1;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .userinfo-header a {
    position: absolute;
    left: 0;
    box-sizing: border-box;
    padding-left: 20px;
    text-decoration: none;
    color: #888888;
  }

  form .form-container {
    height: calc(100% - 80px);
  }

  .userinfo form {
    width: 600px;
    height: calc(100% - 60px);
    margin: 0 auto;
    box-sizing: border-box;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
  }

  form .form-container {
    height: calc(100% - 80px);
    padding: 20px;
  }


  .userinfo form .form-item {
    height: 40px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }

  form .form-item label {
    width: 60px;
    display: block;
    text-align: justify;
    text-align-last: justify;
  }

  form .form-item .form-item__right {
    width: calc(100% - 84px);
    height: 100%;
    border: none;
    outline: none;
    box-sizing: border-box;
    border-bottom: 1px solid #f1f1f1;
    font-size: 13px;
    padding-left: 8px;
  }

  form .form-item span.form-item__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  form .form-item span.form-item__right a {
    text-decoration: none;
    color: #409eff;
    cursor: pointer;
  }

  .form-footer {
    height: 80px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-top: 1px solid #f1f1f1;
    padding: 20px;
  }

  .form-footer button {
    background-color: #409eff;
    cursor: pointer;
    color: #ffffff;
    width: 100px;
    height: 40px;
    font-size: 13px;
    border-radius: 4px;
    border: none;
    display: block;
  }
</style>
<section class="userinfo">
    <div class="userinfo-header">
        <a href="/admin/dashboard">
            <i class="ri-arrow-left-line"></i>
            返回
        </a>
        <div class="userinfo-header__title">
            个人信息编辑
        </div>
    </div>
    <% if(info.id){ %>
    <form action="/admin/users/editUserinfo" method="post">
        <% } else { %>
        <form action="/admin/users/add" method="post">
            <% } %>
            <input type="hidden" name="id" value="<%= info.id %>">
            <div class="form-container">
                <div class="form-item">
                    <label>用户名</label>
                    <input class="form-item__right" type="text" name="username" placeholder="请输入用户名"
                           value="<%= info.username %>">
                </div>
                <div class="form-item">
                    <label>密码</label>
                    <input class="form-item__right" type="text" name="password" placeholder="请输入密码"/>
                </div>
                <div class="form-item">
                    <label>昵称</label>
                    <input class="form-item__right" type="text" name="nickname" placeholder="请输入昵称"
                           value="<%= info.nickname %>">
                </div>
                <div class="form-item">
                    <label>邮箱</label>
                    <input class="form-item__right" type="text" name="email" placeholder="请输入邮箱"
                           value="<%= info.email %>">
                </div>
            </div>
            <div class="form-footer">
                <button type="submit">提 交</button>
            </div>
        </form>
</section>
</body>
</html>
